<template>
  <div class="app">
    <div :class="{top:true,act:flg}" @mouseover="ifshow(true)" @mouseout="ifshow(false)">
      <span>{{dataList.title}}</span>
      <span class="el-icon-arrow-down"></span>
    </div>
    <div class="boot" v-show="flg" @mouseover="ifshow(true)" @mouseout="ifshow(false)">
      <router-link v-for="item in dataList.bot" :key="item.id" :to="item.src">{{item.name}}</router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: ['dataList'],
  data() {
    return {
      flg: false
      //   dataList:
    };
  },
  methods: {
    ifshow(dat) {
      this.flg = dat;
    }
  },
  components: {}
};
</script>


<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.el-dropdown-link:hover {
  cursor: pointer;
  color: $main-color12;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.act {
  box-shadow: 0px 4px 15px 0px #00000017;
}
.app {
  .drbox a {
    padding: 10px;
  }
  .top {
    padding-left: 8px;
    padding-right: 8px;
  }
  .boot {
    background-color: $main-back-color;
    position: relative;
    top: -9px;
    box-shadow: 0px 4px 15px 0px #00000017;
    z-index: 2;
    a {
      display: block;
      text-align: center;
      line-height: 30px;
    }
    a:hover {
      background-color: $MainBackHoverColor;
    }
  }
}
</style>
